#app {

  .sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    transition: width .28s;
    z-index: 1000;
  }

  .app-main {
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: margin-left .28s;
  }

  .sidebar-wrapper {
    width: 100%;
    height: 100%;

    .el-scrollbar {
      height: calc(100% - 50px);
  
      .is-horizontal {
        display: none;
      }
  
      .is-vertical {
        right: 0;
      }
  
      .scrollbar-wrapper {
        overflow-x: hidden !important;
      }
  
      .el-scrollbar__view {
        height: 100%;
      }
    }

    .el-menu {
      width: 100%;
      height: 100%;
      border: none;

      .el-menu-item, .el-submenu__title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
    }
  }

  // 菜单展开
  .openSidebar {
    .sidebar-container {
      width: 200px !important;
    }

    .app-main {
      margin-left: 200px;
    }
  }

  // 菜单折叠
  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }

    .app-main {
      margin-left: 54px;
    }

    .el-tooltip,
    .el-submenu__title {
      padding: 0 !important;
    }

    .menu-item {
      .menu-icon {
        margin-left: 20px;
      }
  
      span,
      &>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
        display: none;
      }
    }
  }

  // mobile css
  .mobile {
    .app-main {
      margin-left: 0;
    }

    .sidebar-container {
      width: 200px !important;
      transition: transform .28s;
    }

    &.hideSidebar {
      .sidebar-container {
        transform: translateX(-100%);
      }
    }
  }

  // fix transition bug
  .withoutAnimation {
    .sidebar-container,
    .app-header,
    .app-main {
      transition: none !important;
    }
  }
}